{% extends "../layouts/admin.html" %}
{% block content %}
<section class="content-wrap bg-white">
  <header class="header navbar bg-white shadow">
    <div class="btn-group tool-button">
      <a class="btn btn-primary navbar-btn" href="/system/role/index" data-pjax><i class="ti-angle-left"></i> 返回</a>
      <a class="btn btn-primary navbar-btn" href="/system/role/selectUser" data-toggle="modal" data-target="#dialogUserSelect"><i class="ti-plus"></i> 添加用户到 [{{role.name}}] 角色</a>
      <button class="btn btn-danger navbar-btn" onclick="delCheck()"><i class="ti-close"></i> 从 [{{role.name}}] 角色中删除用户</button>
    </div>
    <div class="pull-right offscreen-right">
      <button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
          class="fa fa-sliders"></i> 筛选
      </button>
    </div>
  </header>
  <div class=panel-body style="padding-top: 50px;">
    <div class="table-responsive no-border">
      <input id="unitid" type="hidden">
      <input id="roleid" type="hidden" value="{{role.id}}">
      <table class="table table-bordered table-striped mg-t datatable">
        <thead>
        <tr>
          <th>用户名</th>
          <th>姓名</th>
          <th>状态</th>
          <th>是否在线</th>
      </table>
    </div>
  </div>
</section>
<div class="cd-panel from-right">
  <header class="cd-panel-header">
    <h4>高级筛选</h4>
    <a href="javascript:;" class="cd-panel-close text-center"><i class="ti-close"></i> </a>
  </header>
  <div class="cd-panel-container">
    <div class="cd-panel-content shadow">
      <div class="form-group">
        <label for="loginname">用户名</label>
        <input type="text" id="username" name="username" class="form-control" placeholder="用户名/登录名" autofocus>
      </div>
      <div class="form-group">
        <label for="nickname">姓名</label>
        <input type="text" id="nickname" name="nickname" class="form-control" placeholder="姓名/昵称">
      </div>
      <button id="searchBtn" type="button" class="btn btn-default">查询</button>
    </div>
  </div>
</div>
<div id="dialogUserSelect" class="modal fade bs-modal-sm" tabindex="-3" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>
<script language="JavaScript">
  var datatable;
  function initDatatable() {
    datatable = $('.datatable').DataTable({
      "dom": '<"toolbar">frtip',
      "searching":false,
      "processing": false,
      "serverSide": true,
      "select": true,
      "ordering": true,
      "language": {
        "url": "/assets/plugins/datatables/cn.json"
      },
      "preDrawCallback": function () {
        sublime.showLoadingbar($(".main-content"));
      },
      "drawCallback": function () {
        sublime.closeLoadingbar($(".main-content"));
      },
      "ajax": {
        "url": "/system/role/editUser",
        "type": "post",
        "data": function (d) {
          d.roleid = $('#roleid').val();
          d.username = $('#username').val();
          d.nickname = $('#nickname').val();
        }
      },
      "order": [[0, "desc"]],
      "columns": [
        {"data": "username", "bSortable": true},
        {"data": "nickname", "bSortable": true},
        {"data": "status", "bSortable": true},
        {"data": "online", "bSortable": true}
      ],
      "columnDefs": [
        {
          "render": function (data, type, row) {
            if (data) {
              return '<i class="fa fa-circle text-success ml5"></i>';
            } else {
              return '<i class="fa fa-circle text-danger ml5"></i>';
            }
          },
          "targets": 3
        },
        {
          "render": function (data, type, row) {
            if (data) {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
            } else {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
            }
          },
          "targets": 2
        }
      ]
    });
    datatable.on('click', 'tr', function () {
      $(this).toggleClass('selected');
    });
    $("#searchBtn").on('click', function () {
      datatable.ajax.reload();
    });
  }
  function delCheck(){
    var chks = datatable.rows('.selected').data();
    if (chks.length > 0) {
      var ids = [];
      $.each(datatable.rows('.selected').data(), function (i, n) {
        ids.push(n.id);
      });
      $.post("/system/role/delUser", {ids: JSON.stringify(ids),roleid: $('#roleid').val()}, function (data) {
        if (data.errno == 0) {
          Toast.success(data.data);
          datatable.ajax.reload();
        } else {
          Toast.error(data.errmsg);
        }
      }, "json");
    }else{
      Toast.warning("请先选择用户！");
    }
  }
  $(document).ready(function () {
    initDatatable();
    $("#dialogUserSelect").on("hidden.bs.modal", function () {
      $(this).removeData("bs.modal");
    });
  });

</script>
{% endblock %}